@require './config'
@require './code'
@require './custom-blocks'
@require './wrapper'
@require './toc'
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap')

html,
body
  padding 0
  margin 0
  background-color #fff

body
  font-family -apple-system, Rubik, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 16px
  color $textColor

::selection
  background lighten($accentColor, 80%)

::-webkit-scrollbar
  width 8px !important
  height 8px !important
  background-color transparent !important

::-webkit-scrollbar-thumb
  border-radius 10px !important
  background-color #CCC !important

::-webkit-scrollbar-track-piece
  background-color #FFF !important

.page
  padding-left $sidebarWidth

.navbar
  position fixed
  z-index $navbarIndex
  top 0
  left 0
  right 0
  height $navbarHeight
  box-sizing border-box

.sidebar-mask
  position fixed
  z-index $sidebarIndex - 1
  top 0
  left 0
  width 100vw
  height 100vh
  display none

.sidebar
  font-size 16px
  background-color #fff
  width $sidebarWidth
  position fixed
  z-index $sidebarIndex
  margin 0
  top $navbarHeight
  left 0
  bottom 0
  box-sizing border-box
  overflow-y auto

{$contentClass}:not(.custom)
  @extend $wrapper

  > *:first-child
    margin-top $navbarHeight

  a:hover
    text-decoration underline

  p.demo
    padding 1rem 1.5rem
    border 1px solid #ddd
    border-radius 4px

  img
    max-width 100%

{$contentClass}.custom
  padding 0
  margin 0

  img
    max-width 100%

a
  font-weight 500
  color $accentColor
  text-decoration none

p a code
  font-weight 400
  color $accentColor

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size 1rem
  color #999
  border-left 0.2rem solid #dfe2e5
  margin 1rem 0
  padding 0.25rem 0 0.25rem 1rem

  & > p
    margin 0

ul,
ol
  padding-left 1.2em

strong
  font-weight 600

h1,
h2,
h3,
h4,
h5,
h6
  font-weight 600
  line-height 1.25

  {$contentClass}:not(.custom) > &
    margin-top 0.5rem - $navbarHeight
    padding-top ($navbarHeight + 1rem)
    margin-bottom 0

    &:first-child
      margin-top -1.5rem
      margin-bottom 1rem

      + p,
      + pre,
      + .custom-block
        margin-top 2rem

  &:hover .header-anchor
    opacity 1

h1
  font-size 2.2rem

h2
  font-size 1.65rem
  padding-bottom 0.3rem

h3
  font-size 1.35rem

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0
  transition opacity 0.2s

  &:hover
    text-decoration none !important

code,
kbd,
.line-number
  font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace

p,
ul,
ol
  line-height 1.7

hr
  border 0
  border-top 1px solid $borderColor

table
  border-collapse collapse
  margin 1rem 0
  display block
  overflow-x auto

tr
  border-top 1px solid #dfe2e5

  &:nth-child(2n)
    background-color #f6f8fa

th,
td
  border 1px solid #dfe2e5
  padding 0.6em 1em

.theme-container
  &.sidebar-open
    .sidebar-mask
      display block

  &.no-navbar
    {$contentClass}:not(.custom) > h1,
    h2,
    h3,
    h4,
    h5,
    h6
      margin-top 1.5rem
      padding-top 0

    .sidebar
      top 0

.theme-default-content p
  text-align justify

.medium-zoom-image--opened
  border-radius 5px
  box-shadow 0 0 20px rgba(0, 0, 0, 0.1)

.sr-only
  position absolute
  width 1px
  height 1px
  padding 0
  margin -1px
  overflow hidden
  clip rect(0, 0, 0, 0)
  white-space nowrap
  border-width 0

.sale-fade-enter-active,
.sale-fade-leave-active
  opacity 1
  transition all 0.5s ease

.sale-fade-enter
  transform translateX(-20px)
  opacity 0

.sale-fade-leave-to
  opacity 0

@media (min-width ($MQMobile + 1px))
  .theme-container.no-sidebar
    .sidebar
      display none

    .page
      padding-left 0

@require 'mobile.styl'
